<ui:composition template="/WEB-INF/templates/main-template.xhtml"
	xmlns="http://www.w3.org/1999/xhtml"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:p="http://primefaces.org/ui">

	<ui:define name="sidebar">
		<ui:include src="/WEB-INF/templates/public-sidebar.xhtml" />
	</ui:define> 
	<ui:define name="content">
		
		<h:form>
		<p:growl id="growl"/>
			<h:panelGrid style="width: 100%;"> 
				<h:outputText value="Complaints/Suggestions" styleClass="outputTextTitle" />		
					
				<p:dataTable tableStyle="width:100%" id="complaintsTable" liveScroll="true" paginatorAlwaysVisible="false"
					value="#{complaintsAndSuggestionsBean.complaintAndSuggestions}"
					var="row" paginator="true" rows="20">

					<p:column headerText="CS code" >
						<h:outputText value="#{row.code}" />
					</p:column>

					<p:column headerText="Date raised" >
						<h:outputText value="#{row.createDate}">
							<f:convertDateTime pattern="dd-MMM-yyyy HH:mm" timeZone="#{complaintsAndSuggestionsBean.timeZone}"/> 
						</h:outputText>
					</p:column>

					<p:column headerText="Raised by">
						<h:outputText value="#{row.raiser}" />
					</p:column>

					<p:column headerText="Complaint/Suggestion">
						<h:outputText value="#{row.briefComplaint}" />
						<h:outputText id="complaint" value="more" style="float: right; color: #EAAB00;  cursor: pointer;"/>
		                
		                <p:tooltip for="complaint">
		                	<h:panelGrid columnClasses="gridCellMiddleLeftAligned" style="width: 300px;">
		                		<h:panelGrid columns="3">
			                		<h:outputText value="Complaint code" style="font-weight: bold;"/>
			                		<h:outputText value=":" />
			                		<h:outputText value="#{row.code}" />
			                		<h:outputText value="Date raised" style="font-weight: bold;"/>
			                		<h:outputText value=":" />
			                		<h:outputText value="#{row.dateRaised}" >
			                			<f:convertDateTime pattern="dd-MMM-yyyy HH:mm" timeZone="#{complaintsAndSuggestionsBean.timeZone}"/>
			                		</h:outputText>
			                		<h:outputText value="Raise by" style="font-weight: bold;"/>
			                		<h:outputText value=":" />
		                			<h:outputText value="#{row.raiser}" />
		                		</h:panelGrid>
		                		
		                		<p:spacer />
		                		
		                		<h:outputText value="Complaint/Suggestion:"  style="font-weight: bold;"/>
		                		<h:outputText value="#{row.complaint}" />
		                		
		                	</h:panelGrid>
		                </p:tooltip> 
					</p:column>
				
					<p:column headerText="Reply" >
						 <p:commandButton value="Reply" oncomplete="replyCSDialog.show()" update="@form" process="@this" 
							actionListener="#{complaintsAndSuggestionsBean.replyToComplaintListener}" >
							 <f:param id="complaintCode" name="complaintCode" value="#{row.code}" />
						 </p:commandButton>
					</p:column>
					
					<p:column headerText="Reply">
						<h:outputText value="#{row.briefReply}" />
						<h:outputText id="complaintReply" value="more" style="float: right; color: #EAAB00;  cursor: pointer;"/>
		                
		                <p:tooltip for="complaintReply">
		                	<h:panelGrid columnClasses="gridCellMiddleLeftAligned" style="width: 300px;">
		                		<h:panelGrid columns="3">
			                		<h:outputText value="Complaint code" style="font-weight: bold;"/>
			                		<h:outputText value=":" />
			                		<h:outputText value="#{row.code}" />
			                		<h:outputText value="Date raised" style="font-weight: bold;"/>
			                		<h:outputText value=":" />
			                		<h:outputText value="#{row.dateRaised}" >
			                			<f:convertDateTime pattern="dd-MMM-yyyy HH:mm" timeZone="#{complaintsAndSuggestionsBean.timeZone}"/>
			                		</h:outputText>
			                		
			                		<h:outputText value="Replaied On" style="font-weight: bold;"/>
			                		<h:outputText value=":" />
			                		<h:outputText value="#{row.dateModified}" >
			                			<f:convertDateTime pattern="dd-MMM-yyyy HH:mm" timeZone="#{complaintsAndSuggestionsBean.timeZone}"/>
			                		</h:outputText>
			                		
			                		<h:outputText value="Replied By" style="font-weight: bold;"/>
			                		<h:outputText value=":" />
		                			<h:outputText value="#{row.modifiedBy}" />
		                		</h:panelGrid>
		                		
		                		<p:spacer />
		                		
		                		<h:outputText value="Reply :"  style="font-weight: bold;"/>
		                		<h:outputText value="#{row.reply}" />
		                		
		                	</h:panelGrid>
		                </p:tooltip> 
					</p:column>
					
				</p:dataTable>
			</h:panelGrid>
			
			    
     <!-- DIALOG BOX CODE -->
	<p:dialog hideEffect="fade" showEffect="fade"
				header="Reply for Complaint/Suggestion"
				id="replyCSDialog" widgetVar="replyCSDialog" resizable="false"
				modal="true">
			<p:scrollPanel style="height: 350px; width:700px; padding: 0; margin: 0; " mode="native">  	
			<h:panelGrid id="dialogContent" columns="3" cellspacing="10" >
			   
	         <h:outputLabel value="Complaint/Suggestion Code" />
	         <h:outputLabel value=":" />
	         <h:outputLabel value="#{complaintsAndSuggestionsBean.complaintAndSuggestion.code}" />
	         
	         <h:outputLabel value="Raised By " />
	         <h:outputLabel value=":" />
	         <h:outputLabel value="#{complaintsAndSuggestionsBean.complaintAndSuggestion.raiser}" />
	         
	         <h:outputLabel value="Raised On" />
	         <h:outputLabel value=":" />
	         <h:outputText value="#{complaintsAndSuggestionsBean.complaintAndSuggestion.dateRaised}" >
	         		<f:convertDateTime pattern="dd-MMM-yyyy HH:mm" timeZone="#{complaintsAndSuggestionsBean.timeZone}"/>
	         </h:outputText>
			
			 <h:outputLabel value="Complaint/Suggestion" />
			 <h:outputLabel value=":" />
			 <h:outputLabel  value="#{complaintsAndSuggestionsBean.complaintAndSuggestion.complaint}" />
						
		    </h:panelGrid>
		    <h:outputLabel value="Enter your reply :" style="font-weight:bold;"/><br />
		    <p:inputTextarea id="reply" rows="6" style="width:670px;"  value="#{complaintsAndSuggestionsBean.complaintAndSuggestion.reply}"/>
		
		</p:scrollPanel>  
		<h:panelGroup style="float:right;">
			<p:commandButton id="submitButton" value="Submit" action="#{complaintsAndSuggestionsBean.saveReplyAction}"
					 update="growl">
			</p:commandButton>	
			<p:commandButton id="closeButton" process="@this" value="Close" oncomplete="replyCSDialog.hide()" update="@form"/>
			
		</h:panelGroup>
			
	</p:dialog>	

		</h:form>
	</ui:define>
</ui:composition>

